<template>
    <div class="publishMinArticle-wrapper">
        <div class="publishMinArticle">
            <el-form 
                ref="formRef"
                @submit.prevent
                :model="formData"
                :rules="rules"
                label-width="120px"
            >
                <el-form-item label="name" prop="name">
                    <el-input v-model="formData.name" placeholder="标题" />
                </el-form-item>

                <el-form-item label="content" prop="content">
                    <el-input 
                        v-model="formData.content" 
                        :rows="10"
                        type="textarea"
                        placeholder="内容"
                    />
                </el-form-item>

                <el-form-item label="files" prop="files">
                    <el-upload 
                        action="/api/min_article_files"
                        list-type="picture-card"
                        :limit="3"
                        v-model:file-list="fileList"
                    >
                        <el-icon><Plus /></el-icon>
                    </el-upload>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit" >提交</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script>
import { Plus } from '@element-plus/icons-vue'
import { setMinArticle } from '@/api/min_article.js'

export default {
    name: 'publishMinArticle',
    components: {
        Plus
    },
    data () {
        return {
            method: 'POST',
            formData: {
                id: null,
                name: null,
                content: null,
                files: [],
            },
            fileList: [],

            rules: {
                name:[
                    { required: true, message: '标题不能为空', trigger: 'blur' },
                    { max: 64, message: '最大长度为64', trigger: 'blur' },
                ],
                content:[
                    { required: true, message: '内容不能为空', trigger: 'blur' },
                    { max: 64, message: '最大长度为1024', trigger: 'blur' },
                ],
                files: [
                    { validator: this.validateCoverImgs, trigger: 'change' }
                ]
            }
        }
    },

    methods: {
        //自定义验证封面图
        validateCoverImgs (rule, value, callback) {
            if (value.length === 3) {
                callback()
            } else if (value.length === 1) {
                callback()
            } else if (value.length === 0) {
                callback()
            } else {
                callback(new Error('封面图只能是三张, 一张, 或无封面'))
            }
        },

        submit () {
            this.$refs.formRef.validate(async (valid, fields) => {
                if (valid) {
                    //将cover_imgs, article_imgs, article_videos转换为我们后端所需要的格式
                    let files = this.fileList.filter(img => img.response).map(img => img.response.data)
                    this.formData.files = files

                    //提交请求
                    let result = await setMinArticle(this.formData, this.method)
                    if (result instanceof Error) return ElMessage.error(result.message)
                    ElMessage.success('发布文章成功')
                }
            })
        },

        //初始化
        mounted () {
            //如何存在id当前操作为修改页面
            let id = this.$route.params.id
            if (id) {
                this.formData.id = id
                this.method = 'PUT'
            }
        }
    }
}
</script>

<style lang="less" scoped>
.publishMinArticle-wrapper{
    padding-right: 50px;
}
</style>